<template>
  <div class="codelover">
    <router-link to="/" class="home-link">首页</router-link>
    <router-link to="/profile" class="home-link">个人简介</router-link>
    <router-link to="/score" class="home-link">个人成绩</router-link>
    <van-nav-bar title="Vue3课程成绩" />
    <form action="/">
  <van-search v-model="search" show-action placeholder="请输入搜索关键词  (按回车搜索)" @search="onSearch" />
  <!-- @cancel="onCancel" -->
</form>

    <!-- 课程下拉菜单 -->
    <van-dropdown-menu>
      <template #title>
        <van-cell title="全部课程" is-link />
      </template>
      <van-dropdown-item v-model="value1" :options="option1" />
      <!-- @change="handleOption1Change" -->
    </van-dropdown-menu>

    <!-- 班级下拉菜单 -->
    <van-dropdown-menu>
      <template #title>
        <van-cell title="全部班级" is-link />
      </template>
      <van-dropdown-item v-model="value2" :options="option2" />
      <!-- @change="handleOption2Change" -->
    </van-dropdown-menu>
    <!-- {{ value2 }} -->
    <div v-for="(item, index) in filterTasks" :key="index" class="task-item">
      <van-cell :title="item.task" class="task-title">
        <template #right-icon>
          <van-tag plain type="danger">{{ item.status }}</van-tag>
        </template>
      </van-cell>
      <div class="task-details">
        <div class="task-class-weight">
          <span>班级：{{ item.class }}</span>
          <span>权重：{{ item.weight }}%</span>
        </div>
        <van-button
          size="small"
          type="default"
          @click="handleVisitLink(item.link)"
          >访问链接</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { ref, computed } from "vue";
import {
  NavBar,
  Search,
  Cell,
  DropdownMenu,
  DropdownItem,
  Tag,
  Button,
} from "vant";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Search.name]: Search,
    [Cell.name]: Cell,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Tag.name]: Tag,
    [Button.name]: Button,
  },
  setup() {
    const searchQuery = ref("");
    const search = ref("");
    const value1 = ref("");
    const value2 = ref("");
    const option1 = [
      { text: "全部课程", value: "" },
      { text: "Vue3开发初体验", value: "Vue3开发初体验" },
      { text: "vue3路由", value: "vue3路由" },
    ];
    const option2 = [
      { text: "全部班级", value: "" },
      { text: "22软件技术1班", value: "22软件技术1班" },
      { text: "22软件技术2班", value: "22软件技术2班" },
      { text: "22软件技术3班", value: "22软件技术3班" },
    ];
    const tasks = ref([
      {
        task: "Vue3开发初体验",
        class: "22软件技术1班",
        status: "未提交",
        weight: 7.5,
        link: "http://example.com",
      },
      {
        task: "Vue3开发初体验",
        class: "22软件技术2班",
        status: "未提交",
        weight: 8,
        link: "http://example.com",
      },
      {
        task: "Vue3开发初体验",
        class: "22软件技术3班",
        status: "未提交",
        weight: 9,
        link: "http://example.com",
      },
      {
        task: "vue3路由",
        class: "22软件技术1班",
        status: "未提交",
        weight: 7.5,
        link: "http://example.com",
      },
      {
        task: "vue3路由",
        class: "22软件技术2班",
        status: "未提交",
        weight: 8,
        link: "http://example.com",
      },
      {
        task: "vue3路由",
        class: "22软件技术3班",
        status: "未提交",
        weight: 9,
        link: "http://example.com",
      },
    ]);
    const filterTasks = computed(() => {
  if (value1.value && value2.value) {
    // 如果同时选择了课程和班级，则需同时满足条件
    return tasks.value.filter(
      (item) => item.task === value1.value && item.class === value2.value
    );
  } else if (value1.value) {
    // 如果只选择了课程，则仅按课程筛选
    return tasks.value.filter((item) => item.task === value1.value);
  } else if (value2.value) {
    // 如果只选择了班级，则仅按班级筛选
    return tasks.value.filter((item) => item.class === value2.value);
  } else {
    // 没有选择任何课程或班级时，返回所有任务
    return tasks.value;
  }
});

    const handleVisitLink = (link) => {
      alert("还未交作业请尽快！");
    };
    const onSearch = (query) => {
    // 使用新查询值更新搜索查询变量
    searchQuery.value = query;

    // 过滤任务列表
    const filteredTasks = tasks.value.filter((item) =>
      item.task.toLowerCase().includes(query.toLowerCase())
    );

    // 更新任务列表以反映搜索结果
    tasks.value = filteredTasks;
  };

    return {
      search,
      searchQuery,
      value1,
      value2,
      option1,
      option2,
      tasks,
      handleVisitLink,
      filterTasks,
      onSearch,
    };
  },
};
</script>

<style scoped>
.home-link {
  margin-right: 20px;
}
.codelover {
  padding: 16px;
}

.search-wrapper {
  margin-bottom: 16px;
}

.task-item {
  margin-bottom: 16px;
}

.task-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>